import { defineComponent, shallowReadonly, shallowRef } from 'vue'
import BaseConfig from './components/base-config'
import DialogueConfig from './components/dialogue-config'
import EventConfig from './components/event-config'
import fold from '@/assets/images/ai-agent/fold.png'

export default defineComponent({
  name: 'ContentConfig',
  setup() {
    const foldVisible = shallowRef(false)
    const tab = shallowRef('baseConfig')
    const tabs = shallowReadonly([
      { title: '基本配置', key: 'baseConfig' },
      { title: '对话体验', key: 'dialogueConfig' },
      { title: '事件触发', key: 'eventConfig' },
    ])

    return () => (
      <>
        <div
          class={{
            'b-t-0 b-b-0 b-l-1 b-r-1 b-solid b-#EDF1F6 position-relative pt-32px transition-width duration-300': true,
            'w-calc-/3': !foldVisible.value,
            'w-144px': foldVisible.value,
          }}
        >
          <h1 class="fw-600 color-#242934 font-size-18px m-b-36px indent-28px">内容配置</h1>
          <i class="position-absolute right-0 top-34px w-14px h-22px bg-#F5F7FB border-rd-[4px_0_0_4px]">
            <img
              class={{
                'w-14px': true,
                'h-22px': true,
                'cursor-pointer': true,
                transition: 'transform 0.3s',
                'transform-rotate-180': foldVisible.value,
              }}
              src={fold}
              alt="折叠"
              onClick={() => (foldVisible.value = !foldVisible.value)}
            />
          </i>
          <div
            class={{
              'h-calc--56px': true,
              'op-100': !foldVisible.value,
              'op-0': foldVisible.value,
            }}
          >
            <a-tabs class="b-t-0 b-l-0 b-r-0 b-b b-solid b-#EDF1F6" v-model:activeKey={tab.value}>
              {tabs.map((i) => (
                <a-tab-pane key={i.key} tab={i.title} />
              ))}
            </a-tabs>
            <div
              class={{
                'h-calc--46px overflow-y-auto': true,
              }}
            >
              <BaseConfig />
              <DialogueConfig />
              <EventConfig />
            </div>
          </div>
        </div>
      </>
    )
  },
})
